<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            color: #292929;
        }

        .table_title {
            font-weight: bold;
            height: 50px;
            background-color: #dddddd;
        }

        .active {
            background-color: #50abda;
            background-color: rgba(80, 142, 218, 0.2);
        }

        .table_row {
            height: 40px;
        }

        .info_table {
            width: 100%;
            height: 60px;
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
        }

        .title {
            font-size: 16px;
            background-color: #f0f0f0;
        }
    </style>
    <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/css/default.css"/>
    <link rel="stylesheet" type="text/css" href="/css/component.css"/>

</head>

<body class="web-font">
<#--${name[0].plan.plan_title}-->
<table rules=all style="border: 1px #292929 solid;width: 100%">
    <tr class="table_title table_row">
        <td style="padding-left: 5px;padding-right: 5px;">序号</td>
        <td style="padding-left: 5px;padding-right: 5px;">计划id</td>
        <td style="padding-left: 5px;padding-right: 5px;">计划名称</td>
        <td style="padding-left: 5px;padding-right: 5px;">创建人</td>
        <td style="padding-left: 5px;padding-right: 5px;">合作人</td>
        <td style="padding-left: 5px;padding-right: 5px;">创建时间</td>
        <td style="padding-left: 5px;padding-right: 5px;">最后编辑时间</td>
        <td style="padding-left: 5px;padding-right: 5px;">最后登陆时间</td>
    </tr>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/modernizr.custom.js"></script>

    <script type="text/javascript">
        $(function () {
            $('tr').on('click', function (e) {
                $(this).addClass('active');
                $(this).siblings().removeClass('active');

                console.log("active", e.currentTarget.dataset.plan_id);
                $.ajax({
                    url: "https://www.niurenshuma.cn:443/templates/t",
                    // url: "https://192.168.1.164:443/templates/t",
                    data: {planId: e.currentTarget.dataset.plan_id},
                    type: "post",
                    dataType: "json",
                    cache: false,
                    async: false,
                    contentType: 'application/x-www-form-urlencoded',
                    success: function (e) {
                        console.log(e);
                        $("#r_table").html("");
                        $("#r_table").append("<tr  class=\"table_title table_row\">" +
                                "<td  style=\"width:300px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">任务名称</td>" +
                                "<td style=\"padding-left: 5px;padding-right: 5px;\">创建时间</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">是否完成</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">创建人</td>" +
                                "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">最后编辑时间</td>" +
                                "</tr>");
                        var list = e;
                        for (var i = 0; i < list.length; i++) {
                            var strCheck = "否";
                            if (list[i].is_checked) {
                                strCheck = "是";
                            } else {
                                strCheck = "否";
                            }
                            $("#r_table").append("<tr class=\"table_row\">" +
                                    "<td  style=\"width:200px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;\">" + list[i].task_title + "</td>" +
                                    "<td style=\"width:200px;padding-left: 5px;padding-right: 5px;\">" + list[i].task_create_time + "</td>" +
                                    "<td style=\"width:50px;padding-left: 5px;padding-right: 5px;\">" + strCheck + "</td>" +
                                    "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].creator + "</td>" +
                                    "<td style=\"width:100px;padding-left: 5px;padding-right: 5px;\">" + list[i].task_last_edit_time + "</td>" +
                                    "</tr>");
                        }
                    },
                    error: function (e) {
                        alert(e);
                    }
                });
            })
        })
    </script>
<#list  name as plan>
    <tr class="table_row md-trigger" data-modal="modal-1" data-index="${plan_index}" data-plan_id="${plan.plan_id}">
        <td style="width:100px;padding-left: 5px;padding-right: 5px;">${plan_index+1}</td>
        <td style="width:100px;padding-left: 5px;padding-right: 5px;">${plan.plan_id}</td>
        <td style="width:500px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;">${plan.plan_title}</td>
        <td style="padding-left: 5px;padding-right: 5px;">${plan.creator}</td>
        <td style="padding-left: 5px;padding-right: 5px;">${plan.userName}</td>
        <td style="padding-left: 5px;padding-right: 5px;">${plan.plan_create_time}</td>
        <td style="padding-left: 5px;padding-right: 5px;">${plan.last_edit_time}</td>
        <td style="padding-left: 5px;padding-right: 5px;">${plan.last_login_time}</td>
    </tr>
</#list>

</table>
<div id="dialog"></div>

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h5>任务</h5>
        <div>
            <table id="r_table" rules=all style="border: 1px #292929 solid;width: 100%;margin-bottom: 20px;">
            <#--<#list  task as PlanWithTask>-->
            <#--<tr class="table_row md-trigger" data-modal="modal-1" >-->
            <#--<td style="width:100px;padding-left: 5px;padding-right: 5px;">${PlanWithTask.task_id}</td>-->
            <#--<td style="width:300px;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;padding-left: 5px;padding-right: 5px;">${PlanWithTask.task_title}</td>-->
            <#--<td style="padding-left: 5px;padding-right: 5px;">${PlanWithTask.task_create_time}</td>-->
            <#--</tr>-->
            <#--</#list>-->
            </table>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>
<#--${name}-->

<!-- classie.js by @desandro: https://github.com/desandro/classie -->
<script src="/js/classie.js"></script>
<script src="/js/modalEffects.js"></script>

<!-- for the blur effect -->
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
<#--<script>-->
<#--// this is important for IEs-->
<#--var polyfilter_scriptpath = '/js/';-->
<#--</script>-->
<#--<script src="/js/cssParser.js"></script>-->
<#--<script src="/js/css-filters-polyfill.js"></script>-->
<div id="pager">

</div>
</body>
</html>